<template>
  <f7-page>
    <!-- <f7-navbar :sliding="false">
      <f7-nav-left></f7-nav-left>
      <f7-nav-title sliding>齐明软件-APP框架 5.0.0</f7-nav-title>
      <f7-nav-right></f7-nav-right>
    </f7-navbar>-->
    <f7-user-navbar title="齐明软件-APP框架 5.0.0" :back="false"></f7-user-navbar>

    <f7-block strong class="no-margin index_top_pic block-shadow">
      <f7-row>
        <f7-col class="text-align-left weather">
          <f7-weather format="{city} {icon} {observe.weather} {observe.degree}°"></f7-weather>
        </f7-col>
        <f7-col class="text-align-right datetime">{{ today | week }}&nbsp;&nbsp;{{ today | date }}</f7-col>
      </f7-row>
    </f7-block>

    <f7-block>
      <a href="/ui/button/index">按钮</a>
      <a href="/ui/upload-picture/index">上传图片</a>
      <a href="/ui/upload/index">上传文件</a>
      <a href="/ui/set/index">列表</a>
      <a href="/ui/search/index">搜索</a>
      <a href="/ui/datetime-picker/index">选择器</a>
      <a href="/ui/multiple-choice/index">多选</a>
      <a href="/ui/send-verification-code/index">验证码</a>
      <a href="/ui/home/index">首页</a>
      <a href="/ui/home/index-2">首页2</a>
      <a href="/ui/home/index-3">首页3</a>
      <a href="/ui/home/index-4">首页4</a>
      <a href="/ui/home/index-5">首页5</a>
      <a href="/ui/home/index-6">首页6</a>
      <a href="/ui/step/index1">流程</a>
      <a href="/ui/step/index2">流程2</a>
      <a href="/ui/popover/index">气泡框</a>
      <a href="/ui/badge/index">徽标</a>
      <a href="/ui/tag/index">标签</a>
      <a href="/im/me">....</a>
      <a href="/setting/editPassword">修改密码</a>
      <a href="/setting/feedback">反馈</a>
      <a href="/setting/general">设置</a>
      <a href="/base/frame">...</a>
    </f7-block>

    <f7-block>
      <f7-link href="/ui/blank-page/black/pageLoadFailed">空白页面</f7-link>
      <f7-link href="/ui/blank-page/pageSuccessWithButton">操作成功提示</f7-link>
      <f7-link href="/ui/blank-page/pageLoading">加载页面</f7-link>
    </f7-block>

    <f7-block>
      <f7-link href="/ui/function-entrance/index1">功能入口1</f7-link>
      <f7-link href="/ui/function-entrance/index2">功能入口2</f7-link>
      <f7-link href="/ui/function-entrance/index3">物业管理</f7-link>
    </f7-block>

    <f7-block>
      <f7-link @click="downTest">下载测试</f7-link>
    </f7-block>
      <f7-block>
        <a href="/ui/feedback/index4">点击跳转测试页</a>
        <br>
        <a href="/im/me.vue/">个人中心测试页</a>
      </f7-block>
    <f7-block>
      <f7-link href="/ui/list/index">列表页首页</f7-link>
      <f7-link href="/ui/list/itemDetail">列表页详情</f7-link>
      <f7-link href="/ui/list/subscribeList">会议室预约</f7-link>
      <f7-link href="/ui/list/courseList">课程列表</f7-link>
      <f7-link href="/ui/list/agencyMatters">代办事项</f7-link>
      <f7-link href="/ui/list/entrustList">代办事项-委托函</f7-link>
      <f7-link href="/ui/list/productStatusList">代办事项-产品状态</f7-link>
      <f7-link href="/ui/list/agencyList">审批系统</f7-link>
      <f7-link href="/ui/list/projectList">项目列表</f7-link>
      <f7-link href="/ui/list/itemQuery">项目查询</f7-link>
    </f7-block>

    <f7-block>
      <f7-link href="/ui/information/index">资讯首页</f7-link>
      <f7-link href="/ui/information/agencyInformation">机关资讯</f7-link>
      <f7-link href="/ui/information/information">资讯</f7-link>
      <f7-link href="/ui/information/timePicker">时间选择</f7-link>
      <f7-link href="/ui/information/classify">分类选择</f7-link>
    </f7-block>

    <f7-block>
      <f7-link href="/ui/ungrouped/preComponent">预制构件</f7-link>
      <f7-link href="/setting/password">修改密码</f7-link>
      <f7-link href="/setting/oauths">已绑定应用</f7-link>
      <f7-link href="/setting/themes">主题颜色</f7-link>
    </f7-block>


    <f7-swiper style="margin-bottom: 16px" :params="{ speed: 500, autoplay: { delay: 5000 } }">
      <f7-swiper-slide>
        <f7-img :imgUrl="qmSaleTeamPng"></f7-img>
      </f7-swiper-slide>
      <f7-swiper-slide>
        <f7-img
          imgUrl="http://www.championsoft.cn/r/cms/www/default/pages/images/index_banner_1.jpg"
        ></f7-img>
      </f7-swiper-slide>
      <f7-swiper-slide>
        <f7-img
          imgUrl="http://www.championsoft.cn/r/cms/www/default/pages/images/index_banner_4.jpg"
        ></f7-img>
      </f7-swiper-slide>
    </f7-swiper>

    <f7-block-title>V4版本新组件</f7-block-title>
    <f7-block class="no-padding-left-right list-bg-color">
      <f7-row class="index-grid" style="padding: 15px 0">
        <a class="col-25" href="/business/demo/menu">
          <f7-icon f7="rectangle_on_rectangle"></f7-icon>
          <div class="text">菜单</div>
        </a>
        <a class="col-25" href="/business/demo/cards-expandable">
          <f7-icon f7="pencil_ellipsis_rectangle"></f7-icon>
          <div class="text">扩展卡片</div>
        </a>
        <a class="col-25" href="/business/demo/color-picker">
          <f7-icon f7="arrow_2_squarepath"></f7-icon>
          <div class="text">颜色选择器</div>
        </a>
        <a class="col-25" href="/business/demo/treeview">
          <f7-icon f7="list_bullet_below_rectangle"></f7-icon>
          <div class="text">树形视图</div>
        </a>
      </f7-row>
      <f7-row class="index-grid" style="padding: 15px 0">
        <a class="col-25" href="/business/demo/color-themes">
          <f7-icon f7="rectangle_on_rectangle"></f7-icon>
          <div class="text">颜色主题</div>
        </a>
        <a class="col-25" href="/business/demo/skeleton">
          <f7-icon f7="rectangle_on_rectangle"></f7-icon>
          <div class="text">骨架列表</div>
        </a>
        <a class="col-25" href="/business/demo/appbar">
          <f7-icon f7="rectangle_on_rectangle"></f7-icon>
          <div class="text">App顶部栏</div>
        </a>
        <a class="col-25" href="/business/components/index">
          <f7-icon f7="ellipsis"></f7-icon>
          <div class="text">更多</div>
        </a>
      </f7-row>
    </f7-block>
    <f7-block-title>V5版本新组件</f7-block-title>
    <f7-block class="no-padding-left-right list-bg-color">
      <f7-row class="index-grid" style="padding: 15px 0">
        <a class="col-25" href="/business/demo/page-transitions">
          <f7-icon f7="rectangle_on_rectangle"></f7-icon>
          <div class="text">页面切换动画</div>
        </a>
        <a class="col-25" href="/business/demo/popup">
          <f7-icon f7="rectangle_on_rectangle"></f7-icon>
          <div class="text">Popup改进</div>
        </a>
        <a class="col-25" href="/business/demo/calendar">
          <f7-icon f7="arrow_2_squarepath"></f7-icon>
          <div class="text">日历改进</div>
        </a>
        <a class="col-25" href="/business/demo/sheet-modal">
          <f7-icon f7="rectangle_on_rectangle"></f7-icon>
          <div class="text">Sheet Modal改进</div>
        </a>
      </f7-row>
      <f7-row class="index-grid" style="padding: 15px 0">
        <a class="col-25" href="/business/demo/text-editor">
          <f7-icon f7="list_bullet_below_rectangle"></f7-icon>
          <div class="text">富文本编辑器</div>
        </a>
        <a class="col-25" href="/business/components/index">
          <f7-icon f7="ellipsis"></f7-icon>
          <div class="text">更多</div>
        </a>
        <a class="col-25"></a>
        <a class="col-25"></a>
      </f7-row>
    </f7-block>
    <f7-block-title>自定义组件</f7-block-title>
    <f7-block class="no-padding-left-right list-bg-color">
      <f7-row class="index-grid" style="padding: 15px 0">
        <a class="col-25" href="javascript:void(0);" @click="openMiniApp">
          <f7-icon f7="rectangle_on_rectangle"></f7-icon>
          <div class="text">Webview组件</div>
        </a>
        <a class="col-25" href="/business/components/qrcode">
          <f7-icon f7="pencil_ellipsis_rectangle"></f7-icon>
          <div class="text">二维码</div>
        </a>
        <a class="col-25" href="/business/components/datePicker">
          <f7-icon f7="arrow_2_squarepath"></f7-icon>
          <div class="text">日期选择</div>
        </a>
        <a class="col-25" href="/business/components/echarts">
          <f7-icon f7="list_bullet_below_rectangle"></f7-icon>
          <div class="text">Echarts图表</div>
        </a>
      </f7-row>
      <f7-row class="index-grid" style="padding: 15px 0">
        <a class="col-25" href="/business/components/videoplay">
          <f7-icon f7="play_rectangle"></f7-icon>
          <div class="text">视频播放</div>
        </a>
        <a class="col-25" href="/business/components/fileupload">
          <f7-icon f7="tray_arrow_up"></f7-icon>
          <div class="text">文件上传</div>
        </a>
        <!-- <a class="col-25" href="/business/todo/list">
          <f7-icon f7="arrow_branch"></f7-icon>
          <div class="text">工作流</div>
        </a>-->
        <a class="col-25" href="/business/components/index">
          <f7-icon f7="ellipsis"></f7-icon>
          <div class="text">更多</div>
        </a>
        <a class="col-25"></a>
      </f7-row>
    </f7-block>

    <!-- <f7-block-title>组件列表</f7-block-title>
    <f7-block class="no-padding-left-right list-bg-color">
      <f7-row class="index-grid" style="padding:15px 0">
        <a class="col-25" href="/business/demo/page-transitions">
          <f7-icon f7="rectangle_on_rectangle"></f7-icon>
          <div class="text">页面动画</div>
        </a>
        <a class="col-25" href="/business/demo/inputs">
          <f7-icon f7="pencil_ellipsis_rectangle"></f7-icon>
          <div class="text">form表单</div>
        </a>
        <a class="col-25" href="/business/demo/infinite-scroll">
          <f7-icon f7="arrow_2_squarepath"></f7-icon>
          <div class="text">无限加载列表</div>
        </a>
        <a class="col-25" href="/business/demo/skeleton">
          <f7-icon f7="list_bullet_below_rectangle"></f7-icon>
          <div class="text">骨架元素</div>
        </a>
      </f7-row>
      <f7-row class="index-grid" style="padding:15px 0">
        <a class="col-25" href="/business/demo/text-editor">
          <f7-icon f7="text_cursor"></f7-icon>
          <div class="text">文本编辑器</div>
        </a>
        <a class="col-25" href="/business/demo/swiper">
          <f7-icon f7="macwindow"></f7-icon>
          <div class="text">轮播图</div>
        </a>
        <a class="col-25" href="/business/demo/photo-browser">
          <f7-icon f7="photo_on_rectangle"></f7-icon>
          <div class="text">图片浏览器</div>
        </a>
        <a class="col-25" href="/business/demo/list-index">
          <f7-icon f7="person_2"></f7-icon>
          <div class="text">通讯录</div>
        </a>
      </f7-row>
      <f7-row class="index-grid" style="padding:15px 0">
        <a class="col-25" href="/business/components/videoplay">
          <f7-icon f7="play_rectangle"></f7-icon>
          <div class="text">视频播放</div>
        </a>
        <a class="col-25" href="/business/components/fileupload">
          <f7-icon f7="tray_arrow_up"></f7-icon>
          <div class="text">文件上传</div>
        </a>
        <a class="col-25" href="/business/todo/list">
          <f7-icon f7="arrow_branch"></f7-icon>
          <div class="text">工作流</div>
        </a>
        <a class="col-25" href="/business/components/index">
          <f7-icon f7="ellipsis"></f7-icon>
          <div class="text">更多</div>
        </a>
      </f7-row>
    </f7-block>-->

    <f7-block-title>通知公告</f7-block-title>
    <f7-list media-list>
      <f7-list-item
        v-for="item in articleList"
        :key="item.id"
        link="#"
        :title="item.title"
        :after="item.time"
        :text="item.content"
      >
        <img slot="media" :src="item.img" width="80" />
      </f7-list-item>
    </f7-list>

    <f7-viewbar-instince slot="fixed"></f7-viewbar-instince>
  </f7-page>
</template>
<style scoped>
.index-banner {
  width: 100%;
}
</style>

<script>
import controller from "@/libs/framework/controller";
import Upload from "@/libs/framework/upload";
import Config from "@/libs/config";

import QmSaleTeamPng from "@/assets/img/qm_sale_team.png";

export default class instance extends controller {
  onBeforeInit() {
    this.urls = {
      query: [],
      model: [],
    };
  }

  mixin() {
    return {
      data() {
        return {
          number: 1.0,
          today: new Date(),
          qmSaleTeamPng: QmSaleTeamPng,
          articleList: [
            {
              id: "2",
              title: "齐明软件中标佛山市信息化项目管理平台项目",
              content:
                "2019年5月21日，齐明软件成功中标佛山市政务服务数据管理局信息化项目管理平台项目。",
              time: "22:20",
              img: "https://ossweb-img.qq.com/images/lol/web201310/skin/big81007.jpg",
            },
            {
              id: "1",
              title: "乔迁新址，公司发展再迈征程",
              content:
                "2019年9月11日，在这个值得纪念的日子里，广州市齐明软件科技有限公司迎来了公司发展史上的又一里程碑——乔迁广州市高新技术产业开发区广东软件园C栋3楼，新办公区面积达1300多平方米，相较于老办公区，新办公区在功能设计和空间布局上进行了更加科学、合理的规划，配有多功能会议室、休息室，增设智能展厅，在营造健康、舒适的办公环境的同时也带来了新风气，新思路。",
              time: "22:20",
              img: "https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png",
            },

            {
              id: "3",
              title: "齐明软件中标广州产权交易所电子采购和评审系统建设项目",
              content:
                "近日，我司凭借良好的技术能力和丰富的项目管理经验和良好的企业信誉，在2019年4月8日，成功中标广州产权交易所电子采购和评审系统建设项目。",
              time: "22:20",
              img: "https://ossweb-img.qq.com/images/lol/web201310/skin/big81020.jpg",
            },
          ],
        };
      },
      methods: {
        downTest() {
          // this.$framework.update.down('http://192.168.1.123:9901/attachment/down/a3c5d90c-4135-437b-94ff-097f714c32cd');
          this.$framework.update.down(
            "http://192.168.2.154:9901/mobileApi/base/fileupload/downFile?attachmentId=b1a0bcc6-f1a9-4ff9-a51e-946745762ce3"
          );

          // this.$framework.update.down('https://download.jetbrains.8686c.com/idea/ideaIC-2020.1.1.exe');
        },
        openMiniApp() {
          let item = {
            key: "Framework7",
            appName: "Framework7",
            appLink: "https://framework7.io/kitchen-sink/vue/index.html",
          };
          this.$framework.miniApp.open(item.key, null, "white");
        },
      },
      computed: {},
      mounted() {},
    };
  }
}
</script>

<style scoped>
.list-bg-color {
  background: var(--f7-list-bg-color);
}
.no-padding-left-right {
  padding-left: 0px;
  padding-right: 0px;
}
.grid-link-color {
  color: var(--f7-text-color);
}
.grid-img {
  vertical-align: middle;
  padding-right: 2px;
  width: 32px;
  height: 32px;
}
.grid-col {
  padding: 10px;

}
.ios .block-strong {
  border: 0px none;
  padding: 12px 15px;
}
</style>
